<template>
  <div class="content-margin">
    <div class="item-title-top">待审批药店列表</div>
    <br>
    <el-table
      :data="tableData"
      stripe
      max-height="350"
      size="small"
      :row-class-name="tableRowClassName"
      style="width: 100%"
    >
      <el-table-column
        prop="monitor"
        label="药店名称"
      >
        <template slot-scope="scope">
          <div style="color: indianred;">{{ scope.row.monitor }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="药店位置"
      >
        <template slot-scope="scope">
          <div style="color: indianred;">{{ scope.row.address }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="time"
        label="申请时间"
      >
        <template slot-scope="scope">
          <div style="color: indianred;">{{ scope.row.time }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="state"
        label="审批状态"
      >
        <template slot-scope="scope">
          <div style="color: indianred;">{{ scope.row.state }}</div>
        </template>
      </el-table-column>
      <el-table-column
        width="100"
        label="详情"
      >
        <template slot-scope="scope">
          <a href="javascript:void (0)" style="text-decoration: none;color:#82abfd;" @click="showDetails(scope.$index)">详情</a>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { transactionList } from '@/api/remote-search'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    },
    orderNoFilter(str) {
      return str.substring(0, 30)
    }
  },
  data() {
    return {
      list: null,
      tableData: [
        {
          monitor: '静山花园药店',
          address: '北仑区新碶 ',
          time: '2019-06-12 12:34:56',
          state: '区审核'
        },
        {
          monitor: '印象巴黎药店',
          address: '海曙区古林镇',
          time: '2019-06-12 12:34:56',
          state: '提交资料中'
        },
        {
          monitor: '银亿上上城 药店',
          address: '鄞州区潘火',
          time: '2019-06-12 12:34:56',
          state: '开户中'
        },
        {
          monitor: '锦绣江南药店',
          address: '北仑骆驼',
          time: '2019-06-12 12:34:56',
          state: '开户完成待会签'
        }
      ]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      transactionList().then(response => {
        this.list = response.data.items.slice(0, 8)
      })
    }
  }
}
</script>
